<template>
    <div class="glass p-2 h-screen">
        <header class="flex flex-wrap justify-between items-center px-2 py-1 mb-2 h-fit">
            <el-page-header @back="goBack" class="">
                <template #content>
                    <div class="flex flex-wrap items-end">
                        <span class="text-xl font-500 mr-4">环球导航</span>
                        <el-text type="warning" class="text-4">一样的角色，不一样的眼界</el-text>
                    </div>
                </template>
            </el-page-header>
            <div class="glass rounded-5 px-2 h-26px pb-1">
                <Clock class="me-2" />
                <ThemeSwitch />
            </div>
        </header>
        <main class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            <el-card v-for="(item, idx) of allData" :key="idx">
                <div class="text-center">
                    <el-button link @click="showDialog(item.category)">
                        <h3 class="m-1">{{ item.category }}</h3>
                    </el-button>
                </div>
                <el-divider />
                <div class="flex flex-wrap justify-between my-1">
                    <template v-if="item.hotlinks">
                        <el-link class="my-1 me-3" :href="item2.link" target="_blank"
                            v-for="(item2, idx2) of item.hotlinks" :key="idx2">
                            <el-text style="max-width:7em" truncated :title="item2.text">{{ item2.text }}</el-text>
                        </el-link>
                    </template>
                    <el-link class="m-1 me-3" @click="showDialog(item.category)"><el-text
                            style="max-width:7em">全部</el-text></el-link>
                </div>
            </el-card>
        </main>
    </div>
    <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" width="80%" align-center>
        <el-collapse v-model="activeNames">
            <el-collapse-item :title="item.text" :name="idx.toString()" v-for="(item, idx) of categoryData" :key="idx">
                <el-link class="me-4 mb-3" :href="item2.link" target="_blank" v-for="(item2, idx2) of item.data"
                    :key="idx2">
                    {{ item2.text }}
                </el-link>
            </el-collapse-item>
        </el-collapse>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="info" @click="dialogInfo.visible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import Clock from '@/components/clock/Clock.vue';
import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import allData from '@/mock/data/all';

const dialogInfo = ref({
    visible: false,
    title: 'Title'
});
const activeNames = ref([]);
const categoryData = ref(allData[0].data);
const activeIndex = ref(allData[0].category);

const showDialog = (name) => {
    activeNames.value = [];
    dialogInfo.value.visible = true;
    dialogInfo.value.title = name;
    activeIndex.value = name;
    categoryData.value = allData.filter(v => v.category == name)[0].data;
}

const goBack = () => {
    router.push('/');
}
</script>

<style>
.el-card__body {
    padding: 10px 15px;
}

.el-dialog__body {
    height: 60vh;
    overflow-y: auto;
}

.el-divider--horizontal {
    margin: 5px 0
}
</style>